<template>
	<view class="banquet">
		<!-- 搜索 -->
		<view class="search">
			<view class="search-main">
				<input class="search-input" type="text" v-model="search" placeholder="搜索美食，菜谱" />
				<view class="search-content"><image src="../../static/imgs/search.png"></image></view>
			</view>
		</view>
		
		<view class="view-lint"></view>

		<!-- 下拉筛选 -->
		<ren-dropdown-filter :filterData="filterData" :defaultIndex="defaultIndex" @onSelected="onSelected" :border="ture"></ren-dropdown-filter>
		
		
		<!-- 内容 -->
		<view class="banquet-content">
			<view class="banquet-content-ul">
				<view class="banquet-content-li hr" v-for="item in banquetContents" :key="item.id">
					<!-- 左边图片 -->
					<view class="imgs">
						<image class="item-img" :src="item.imgUrl"></image>
						<view class="fire">
							<image :src="item.fireImgUrl"></image>
							<text>{{item.fireText}}</text>
						</view>
					</view>
					
					<!-- 右边内容 -->
					<view class="contents">
						<text class="contents-title">{{item.contentsTitle}}</text>
						<text class="describe">{{item.describe}}</text>
						<text class="price">{{item.price}}</text>
						<view class="contents-item">
							<view class="contents-item-li" v-for="(list,index) in item.contentsTtem" :key="index">
								<text :class="'colorStyle'+index">{{list.text}}</text>
							</view>
						</view>
					</view>
					
					
				</view>
				
			</view>
		</view>
	
	
	</view>
</template>

<script>
import RenDropdownFilter from '@/components/ren-dropdown-filter/ren-dropdown-filter.vue';
export default {
	components: {
		RenDropdownFilter
	},
	data() {
		return {
			// 搜索
			search: '',
			// 下拉筛选
			filterData: [
				[{ text: '全部价格', value: '' }, { text: '200-300', value: '200-300' }, { text: '300-500', value: '300-500' }, { text: '500-700', value: '500-700' }],
				[{ text: '价位排序', value: '' }, { text: '高', value: '高' }, { text: '低’', value: '低' }]
			],
			defaultIndex: [0, 0],
			// 下拉内容
			banquetContents:[
				{
					"id": '123',
					"imgUrl": '../../static/imgs/img2.png',
					"fireImgUrl":'../../static/imgs/fire.png',
					"fireText": '12131',
					"contentsTitle":'美味坝坝宴席',
					"describe":'八菜一汤，特色甜点',
					"price":'1299/桌',
					"contentsTtem":[
						{
							"text":'精品'
						},
						{
							"text":'优选'
							
						},
						{
							"text":'热销'
						}
					]
				},
				{
					"id": '124',
					"imgUrl": '../../static/imgs/img2.png',
					"fireImgUrl":'../../static/imgs/fire.png',
					"fireText": '12131',
					"contentsTitle":'美味坝坝宴席',
					"describe":'八菜一汤，特色甜点',
					"price":'1299/桌',
					"contentsTtem":[
						{
							"text":'精品'
						},{
							"text":'优选'
							
						},{
							"text":'热销'
						}
					]
				},
				{
					"id": '124',
					"imgUrl": '../../static/imgs/img2.png',
					"fireImgUrl":'../../static/imgs/fire.png',
					"fireText": '12131',
					"contentsTitle":'美味坝坝宴席',
					"describe":'八菜一汤，特色甜点',
					"price":'1299/桌',
					"contentsTtem":[
						{
							"text":'精品'
						},{
							"text":'优选'
							
						},{
							"text":'热销'
						}
					]
				},
				{
					"id": '124',
					"imgUrl": '../../static/imgs/img2.png',
					"fireImgUrl":'../../static/imgs/fire.png',
					"fireText": '12131',
					"contentsTitle":'美味坝坝宴席',
					"describe":'八菜一汤，特色甜点',
					"price":'1299/桌',
					"contentsTtem":[
						{
							"text":'精品'
						},{
							"text":'优选'
							
						},{
							"text":'热销'
						}
					]
				},
			]
		
		
		};
	},
	methods: {
		onSelected(res) {
			console.log(res);
		},
		dateChange(d) {
			uni.showToast({
				icon: 'none',
				title: d
			});
		}
	}
};
</script>

<style lang="scss" scoped>
	
	.view-lint{
		margin-top: 30rpx;
		border: 1rpx solid #f7f4fa;
	}
	
	.hr{
		border-bottom: 1px solid #efefef;
		padding: 40rpx 0;
	}
	
//搜索
.search {
	padding: 0 40rpx;
	// margin: 20rpx 0;
	box-sizing: border-box;
	height: 60rpx;	
	.search-main {
		
		height: 100%;
		width: 100%;
		background-color: #efefef;
		border-radius: 30rpx;
		position: relative;
		display: flex;
		align-items: center;
		.search-input {
			padding: 10rpx 0 10rpx 70rpx;
		}
		.search-content {
			position: absolute;
			top: 10rpx;
			left: 20rpx;
			image {
				width: 34rpx;
				height: 34rpx;
				vertical-align: middle;
			}
		}
	}
}

// 下拉筛选
/deep/ .c-flex-align.c-flex-align{
		.data-v-f1c0f312{
			color: #575757;
		}
	
}

/deep/ .filter-wrapper.data-v-f1c0f312 {
	position: relative !important;
}

// 内容
.banquet-content{
	padding: 0 40rpx;
	box-sizing: border-box;
	.banquet-content-ul{
		display: flex;
		flex-direction: column;
		.banquet-content-li{
			display: flex;

		
			.imgs{
				position: relative;
				width: 240rpx;
				height: 240rpx;
				margin-right: 30rpx;
				.item-img{
					width: 240rpx;
					height: 240rpx;
					border: 1px solid #efefef;
				}
				.fire{
					position: absolute;
					bottom: 20rpx;
					right: 20rpx;
					width: 150rpx;
					height: 50rpx;
					background: rgba(0,0,0,0.2);
					display: flex;
					justify-content: center;
					align-items: center;
					color: #fff;
					image{
						width: 30rpx;
						height: 30rpx;
					}
				}
			}
			
		}
		.contents{
			display: flex;
			flex-direction: column;
			.contents-title{
				font-size: 36rpx;
				line-height: 2;
			}
			.describe{
				font-size: 24rpx;
				color: #999;
				line-height: 2;
			}
			.price{
				font-size: 34rpx;
				color: #F0AD4E;
				line-height: 2;
			}
			.contents-item{
				display: flex;
				.contents-item-li{
					margin-right: 10rpx;
					text{
						
						display: block;
						padding: 8rpx 15rpx;
						font-size: 24rpx;
						border-radius: 4rpx;
					}
					.colorStyle0{
						border: 1px solid red;
						color: red;
					}
					.colorStyle1{
						border: 1px solid green;
						color: green;
					}
					.colorStyle2{
						border: 1px solid #F0AD4E;
						color: #F0AD4E;
					}
				}
			}
			
		}
	}
}


</style>
